<script src="../../js/util/GetCommonPic.js"></script>
<template>
  <div class="wrap">
    <template>
      <el-tabs v-model="params.curTab" @tab-click="setCurTab">
        <el-tab-pane name="baseParameters" :label="$t('message.heatAndSoundIsulation.baseParameters')">
          <div>
            <el-checkbox v-model="params.flanging">
              <b class="label-style">{{ $t('message.heatAndSoundIsulation.flanging') }}</b>
            </el-checkbox>
            <el-checkbox v-model="params.reinforced">
              <b>{{ $t('message.heatAndSoundIsulation.reinforcedFrame') }}</b>
            </el-checkbox>
          </div>
          <div>
            <!--            <label class="label-style">{{ $t('message.heatAndSoundIsulation.framePosition') }}：</label>-->
            <query-list
                    v-model="params.surfaces"
                    :description="$t('message.heatAndSoundIsulation.surface')"
                    :active="params.queryListActiveMap.surfaces"
                    @switchQuery="switchQuery('surfaces')"
                    :tipMsg="$t('message.heatAndSoundIsulation.surface')">
            </query-list>
          </div>
          <div>
<!--            <label class="label-style">{{ $t('message.heatAndSoundIsulation.framePosition') }}：</label>-->
            <query-list
                    v-model="params.frames"
                    :description="$t('message.heatAndSoundIsulation.framePosition')"
                    :active="params.queryListActiveMap.frames"
                    @switchQuery="switchQuery('frames')"
                    :tipMsg="$t('message.heatAndSoundIsulation.framePosition')">
            </query-list>
          </div>
          <div>
<!--            <label class="label-style">{{ $t('message.heatAndSoundIsulation.longeronPosition') }}：</label>-->
            <query-list
                    v-model="params.longerons"
                    description="$t('message.heatAndSoundIsulation.longeronPosition')"
                    :active="params.queryListActiveMap.longerons"
                    @switchQuery="switchQuery('longerons')"
                    :tipMsg="$t('message.heatAndSoundIsulation.longeronPosition')">
            </query-list>
          </div>
          <!-- 加强长桁 -->
          <div v-if="params.reinforced">
            <div class="d-flex">
              <div>
                <p><b>{{ $t('message.heatAndSoundIsulation.reinforcedLongeron') }}</b></p>
              </div>
            </div>
            <query-list v-model="params.reinforcedLongerons"
                        description="$t('message.heatAndSoundIsulation.reinforcedLongeron')"
                        :active="params.queryListActiveMap.reinforcedLongerons"
                        @switchQuery="switchQuery('reinforcedLongerons')"
                        :tipMsg="$t('message.heatAndSoundIsulation.reinforcedLongeron')">
            </query-list>
          </div>
<!--          开叉中心线-->
          <div>
            <div>
              <p><b>{{ $t('message.heatAndSoundIsulation.jagParameter') }}</b></p>
            </div>
            <div class="d-flex align-items-center">
              <query-list
                      v-model="params.jagCenterLines"
                      :description="$t('message.heatAndSoundIsulation.jagCenterLine')"
                      :active="params.queryListActiveMap.jagCenterLines"
                      @switchQuery="switchQuery('jagCenterLines')"
                      :tipMsg="$t('message.heatAndSoundIsulation.jagCenterLine')">
              </query-list>
            </div>
          </div>
<!--          <div class="collapse-panel">-->
<!--            <div class="collapse-a d-flex">-->
<!--              <div>-->
<!--                <p><b>{{ $t('message.heatAndSoundIsulation.jagParameter') }}</b></p>-->
<!--              </div>-->
<!--              <div :id="collapseId" @click="foldClick">-->
<!--                    <span class="cursor-pointer" :class="[{'cursor-pointer': true}]">-->
<!--                        <i :class="['fa', collapse ? 'fa-angle-up' : 'fa-angle-down']"/>-->
<!--                    </span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div v-show="!collapse">-->
<!--              <div class="d-flex align-items-center">-->
<!--                <query-list-->
<!--                        v-model="params.jagCenterLines"-->
<!--                        :description="$t('message.heatAndSoundIsulation.jagCenterLine')"-->
<!--                        :active="params.queryListActiveMap.jagCenterLines"-->
<!--                        @switchQuery="switchQuery('jagCenterLines')"-->
<!--                        :tipMsg="$t('message.heatAndSoundIsulation.jagCenterLine')">-->
<!--                </query-list>-->
<!--              </div>-->
<!--              &lt;!&ndash;          <div class="d-flex align-items-center">&ndash;&gt;-->
<!--              &lt;!&ndash;            <label class="label-style">{{ $t('message.heatAndSoundIsulation.referenceLine') }}：</label>&ndash;&gt;-->
<!--              &lt;!&ndash;            <el-input v-model="params.referenceLine"&ndash;&gt;-->
<!--              &lt;!&ndash;                      type = "number"&ndash;&gt;-->
<!--              &lt;!&ndash;                      step = "1"/>&ndash;&gt;-->
<!--              &lt;!&ndash;          </div>&ndash;&gt;-->
<!--              <div class="d-flex align-items-center">-->
<!--                <label class="label-style">{{ $t('message.heatAndSoundIsulation.centerLineDistance') }}：</label>-->
<!--                <el-input v-model="params.centerLineDistance"-->
<!--                          type = "number"-->
<!--                          step = "1"/>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <!--          开孔参数-->
          <div>
            <div class="operation-border" >
              <div class="label-style">
                <p><b>{{ $t('message.heatAndSoundIsulation.holeParameters') }}</b></p>
              </div>
              <div>
                <label class="label-style">{{ $t('message.heatAndSoundIsulation.installHoleList') }}</label>
              </div>
              <el-table ref="sectionList"
                        :data="params.installHoleInfoList"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        tooltip-effect="dark"
                        style="width: 100%;margin-top: 5px"
                        border size="small">
                <el-table-column prop="index"
                                 :label="$t('message.InsulationCoverFrameToolDlg.number')"
                                 min-width="30">
                  <template v-slot="scope">
                    <label class="label">{{scope.row.holeIndex + 1}}</label>
                  </template>
                </el-table-column>
                <el-table-column prop="index"
                                 :label="$t('message.heatAndSoundIsulation.name')"
                                 min-width="80">
                  <template v-slot="scope">
                    <label class="label">{{scope.row.holeName}}</label>
                  </template>
                </el-table-column>
                <el-table-column prop="holeType"
                                 :label="$t('message.heatAndSoundIsulation.installHoleType')"
                                 min-width="40">
                  <template v-slot="scope">
                    <label class="label">{{ scope.row.holeType }}</label>
                  </template>
                </el-table-column>
              </el-table>
              <div class="button-style">
                <el-button type="primary" size="small" :disabled="false" @click="addHoleData()">
                  {{ $t('message.heatAndSoundIsulation.add') }}
                </el-button>
                <el-button type="primary" size="small" :disabled="buttonDisabled()" @click="editHoleData()">
                  {{ $t('message.heatAndSoundIsulation.edit') }}
                </el-button>
                <el-button type="primary" size="small" :disabled="buttonDisabled()" @click="deleteHoleData()">
                  {{ $t('message.heatAndSoundIsulation.delete') }}
                </el-button>
              </div>
            </div>
            <div class="operation-border" v-if="isHoleEdit">
              <query-list
                v-model="params.installHolePointList"
                :description="$t('message.heatAndSoundIsulation.installHolePointList')"
                :active="params.queryListActiveMap.installHolePointList"
                @switchQuery="switchQuery('installHolePointList')"
                :tipMsg="$t('message.heatAndSoundIsulation.installHolePointList')">
              </query-list>
              <div class="d-flex align-items-center">
                <label class="el-form-item__label">{{ $t('message.heatAndSoundIsulation.holeType') }}:</label>
                <el-select v-model="params.holeType">
                  <el-option
                    v-for="item in params.holeTypeList"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="button-style">
                <el-button type="primary" size="small" :disabled="false" @click="saveHoleData()">
                  {{ $t('message.heatAndSoundIsulation.save') }}
                </el-button>
                <el-button type="primary" size="small" :disabled="false" @click="cancelHoleData()">
                  {{ $t('message.heatAndSoundIsulation.cancel') }}
                </el-button>
              </div>
              <el-image class="url-style2"
                        :src="url('holeType.png')"
                        fit="fill">
              </el-image>
            </div>

          </div>
          <!-- 窗户 -->
          <div>
            <div class="d-flex">
              <div>
                <p><b>{{ $t('message.heatAndSoundIsulation.createWindow') }}</b></p>
              </div>
            </div>
            <query-list
                    v-model="params.windowPoint"
                    description="$t('message.heatAndSoundIsulation.windowPoint')"
                    :active="params.queryListActiveMap.windowPoint"
                    @switchQuery="switchQuery('windowPoint')"
                    :tipMsg="$t('message.heatAndSoundIsulation.windowPoint')">
            </query-list>
          </div>
          <!-- 航向 -->
          <div class="d-flex align-items-center">
            <label class="label-style">{{ $t('message.heatAndSoundIsulation.desiredTrack') }}</label>
            <el-select v-model.number="params.heading" @change="changeSelect()">
              <el-option
                      v-for="(item,index) in directionOptions"
                      :key="index"
                      :label="item"
                      :value="index"/>
            </el-select>
          </div>
<!--          <div class="d-flex align-items-center">-->
<!--            <label class="label-style">{{ $t('message.heatAndSoundIsulation.longeronCount') }}：</label>-->
<!--            <el-input id="count"-->
<!--                      v-model="params.longeronCount"-->
<!--                      type = "number"-->
<!--                      step = "1"/>-->
<!--          </div>-->
        </el-tab-pane>
        <el-tab-pane name="flangingParameters" :label="$t('message.heatAndSoundIsulation.flangingParameters')">
          <div>
            <el-image class="url-style"
                      :src="url('flanging.png')"
                      fit="fill">
            </el-image>
          </div>
          <div class="d-flex align-items-center">
            <label class="label-style">{{ $t('message.heatAndSoundIsulation.thickness') }}：</label>
            <el-input v-model="params.thickness"
                      type = "number"
                      step = "1"/>
          </div>
          <div class="d-flex align-items-center">
            <label class="label-style">{{ $t('message.heatAndSoundIsulation.longeronHeight') }}：</label>
            <el-input v-model="params.longeronHeight"
                      type = "number"
                      step = "1"/>
          </div>
          <!-- 翻边参数设置 -->
          <div>
<!--            <div>-->
<!--              <p><b class="label-style">{{ $t('message.heatAndSoundIsulation.flangingParams') }}</b></p>-->
<!--            </div>-->
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.flangingHeight') }}：</label>
              <el-input :disabled="!params.flanging" v-model="params.flangingHeight"
                        type = "number"
                        step = "1"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.flangingThickness1') }}：</label>
              <el-input :disabled="!params.flanging" v-model="params.flangingThickness1"
                        type = "number"
                        step = "1"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.flangingThickness2') }}：</label>
              <el-input :disabled="!params.flanging" v-model="params.flangingThickness2"
                        type = "number"
                        step = "1"/>
            </div>
          </div>
<!--          <div class="d-flex align-items-center">-->
<!--            <label class="label-style">{{ $t('message.heatAndSoundIsulation.jagParameter') }}：</label>-->
<!--            <el-input id="jagParam"-->
<!--                      type = "number"-->
<!--                      step = "1"/>-->
<!--          </div>-->
        </el-tab-pane>
        <el-tab-pane name="reinforcedLongeronParameters" :label="$t('message.heatAndSoundIsulation.reinforcedLongeronParameters')">
          <div>
            <el-image class="url-style"
                      :src="url('frameReinforcedLongeron.png')"
                      fit="fill">
            </el-image>
          </div>
          <div class="d-flex align-items-center">
            <label class="label-style">{{ $t('message.heatAndSoundIsulation.thickness') }}：</label>
            <el-input v-model="params.thickness"
                      type = "number"
                      step = "1"/>
          </div>
          <div class="d-flex align-items-center">
            <label class="label-style">{{ $t('message.heatAndSoundIsulation.longeronHeight') }}：</label>
            <el-input v-model="params.longeronHeight"
                      type = "number"
                      step = "1"/>
          </div>
          <div>
            <!--            <div>-->
            <!--              <p><b class="label-style">{{ $t('message.heatAndSoundIsulation.reinforcedLongeron') }}</b></p>-->
            <!--            </div>-->
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.spanOffset') }}：</label>
              <el-input :disabled="!params.reinforced" v-model="params.spanOffset"
                        type = "number"
                        step = "1"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.headingOffset') }}：</label>
              <el-input :disabled="!params.reinforced" v-model="params.headingOffset"
                        type = "number"
                        step = "1"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.headingOffsetLeft') }}：</label>
              <el-input :disabled="!params.reinforced" v-model="params.headingOffsetLeft"
                        type = "number"
                        step = "1"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.headingOffsetRight') }}：</label>
              <el-input :disabled="!params.reinforced" v-model="params.headingOffsetRight"
                        type = "number"
                        step = "1"/>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="model2DParameters" :label="$t('message.heatAndSoundIsulation.model2DParameters')">
          <div>
            <el-image class="url-style"
                      :src="url('param2D.png')"
                      fit="fill">
            </el-image>
          </div>
          <div>
            <div class="label-style">
              <p><b>{{ $t('message.heatAndSoundIsulation.model2DParameters') }}</b></p>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.horizontalWidth') }}：</label>
              <el-input id="hWidth"
                        v-model="params.horizontalWidth"
                        type = "number"
                        step = "1"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.verticalWidth') }}：</label>
              <el-input id="vWidth"
                        v-model="params.verticalWidth"
                        type = "number"
                        step = "1"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.zoomRatio') }}：</label>
              <el-input id="zoom"
                        v-model="params.zoomRatio"
                        type = "number"
                        step = "1"/>
            </div>
          </div>
          <div>
            <div class="label-style">
              <p><b>{{ $t('message.heatAndSoundIsulation.jagParameter') }}</b></p>
            </div>
            <div class="d-flex align-items-center">
              <label class="label-style">{{ $t('message.heatAndSoundIsulation.centerLineDistance') }}：</label>
              <el-input v-model="params.centerLineDistance"
                        type = "number"
                        step = "1"/>
            </div>
            <el-image class="url-style2"
                      :src="url('jagcenterline.png')"
                      fit="fill">
            </el-image>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
    <!--    确认和关闭-->
    <div class="btn">
      <el-button
              type="primary"
              size="small"
              @click="confirm">
        {{ $t('message.common.confirm') }}
      </el-button>
      <el-button
              size="small"
              @click="cancel">
        {{ $t('message.common.cancel') }}
      </el-button>
    </div>
  </div>
</template>
<script>
  import DialogMixin from "../DialogMixin";
  import {ElementType, GeomType} from "../../../modeling/TypeDefine";
  import {heatAndSoundInsulationCmd} from "../../../command/HeatAndSoundInsulationCommand";
  import {getCommonPic} from "../../js/util/GetCommonPic";

  let IdCount = 0;
  export default {
    mixins: [DialogMixin],
    name: 'HeatAndSoundInsulationDlg',
    data() {
      IdCount++;
      return {
        collapseId: 'dialogCollapsed' + IdCount,
        collapse: false,
        tabOptions: ["baseParameters", "flangingParameters", "reinforcedLongeronParameters", "model2DParameters"],
        directionOptions: ["X轴","-X轴","Y轴","-Y轴","Z轴","-Z轴"],
        params: {
          curTab: "baseParameters",
          surfaces: [],
          frames: [],
          longerons: [],
          reinforcedLongerons: [],
          horizontalWidth: 20,
          verticalWidth: 30,
          zoomRatio: 1.035,
          longeronCount: 5,
          thickness: 60, //实体厚度
          longeronHeight: 30, //长桁高度
          flangingHeight: 30, //翻边高度
          flangingThickness1: 4, //翻边厚度1
          flangingThickness2: 5, //翻边厚度2
          jagCenterLines: [],
          referenceLine: 50,
          centerLineDistance: 10,
          windowPoint: [],
          reinforced: false,//加强框
          flanging: true,
          heading: 0,//航向
          dirCourse:new THREE.Vector3(1,0,0),  //航向
          spanOffset: 10, //蒙皮处沿展向偏移值
          headingOffset: 120, //近内饰处沿航向偏移值
          headingOffsetLeft: 80, //近内饰处沿航向偏移值左
          headingOffsetRight: 60, //近内饰处沿航向偏移值右
          queryListActiveMap: {
            surfaces: 1,
            frames: 0,
            longerons: 0,
            reinforcedLongerons: 0,
            jagCenterLines: 0,
            windowPoint: 0,
            installHolePointList:0,
          },

          //开孔参数
          holeTypeList:[{text:"1",value:1},{text:"2",value:2}],
          installHolePointList:[],
          installHoleInfoList:[],
          holeSelectInfo:{},
          holeType:1,
          holeIndex:0,
          holeName:"",
        },
        isHoleEdit:false,
        editType:-1,   //添加还是新建，添加1，编辑0,删除-1
      }
    },
    mounted() {
      heatAndSoundInsulationCmd.init(400,400,500,() => {
        heatAndSoundInsulationCmd.setSelectType([ElementType.FACE, ElementType.SURFACE]);
        heatAndSoundInsulationCmd.handlePickElement(pickResult => {
          pickResult?.element?.forEach(data => {
            let element = data.element;
            if (!element) {
              return;
            }
            let activeKey = "surfaces";
            for (const key in this.params.queryListActiveMap) {
              if (this.params.queryListActiveMap[key] === 1) {
                activeKey = key;
              }
            }
            if (activeKey === "surfaces") {
              this.params.surfaces.splice(0);
              this.params.surfaces.push(element);
              this.switchQuery("frames");
            } else if (activeKey === "frames") {
              if ((element.type === ElementType.DATUMPLANE || (element.type === ElementType.FACE && element.params?.surfaceType === GeomType.PLANE)) &&
                      this.params[activeKey].length < 2) {
                let found = this.params[activeKey].find(item => item.id === element.id);
                if (!found) {
                  this.params[activeKey].push(element);
                }
                if (this.params[activeKey].length === 2) {
                  this.switchQuery("longerons");
                } else {
                  let frameNormal = element.params.normal;
                  this.setHeading(frameNormal);
                }
              }
            } else if (activeKey === "longerons") {
              if ((element.type === ElementType.DATUMPLANE || (element.type === ElementType.FACE && element.params?.surfaceType === GeomType.PLANE))
                      /*&& this.params[activeKey].length < 2*/) {
                let found1 = this.params[activeKey].find(item => item.id === element.id);//判断长桁列表中是否存在当前选中对象
                let found2 = this.params.reinforcedLongerons.find(item => item.id === element.id);//判断加强长桁列表中是否存在
                if (!found1 && !found2) {
                  this.params[activeKey].push(element);
                }
                // if (this.params[activeKey].length === 2) {
                //   this.switchQuery("jagCenterLines");
                // }
              }
            } else if (activeKey === "jagCenterLines") {
              let foundEle = this.params.jagCenterLines.find(line => {
                return line.id === element.id;
              })
              if (!foundEle) {
                this.params.jagCenterLines.push(element);
              }
            } else if (activeKey === "installHolePointList") {
              let foundEle = this.params[activeKey].find(point => {
                return point.id === element.id;
              })
              if (!foundEle) {
                this.params[activeKey].push(element);
              }
            } else if (activeKey === "windowPoint") {
              this.params.windowPoint.splice(0);
              this.params.windowPoint.push(element);
            } else if (activeKey === "reinforcedLongerons") {
              if ((element.type === ElementType.DATUMPLANE || (element.type === ElementType.FACE && element.params?.surfaceType === GeomType.PLANE))) {
                let found1 = this.params[activeKey].find(item => item.id === element.id);//判断加强长桁列表中是否存在当前选中对象
                let found2 = this.params.longerons.find(item => item.id === element.id);//判断长桁列表中是否存在
                if (!found1 && !found2) {
                  this.params[activeKey].push(element);
                }
              }
            }
            // if (this.params.queryListActiveMap.surfaces === 1 && element.params?.surface != GeomType.PLANE) {
            //   this.params.surfaces.splice(0);
            //   this.params.surfaces.push(element);
            // }else if (this.params.queryListActiveMap.frames === 1 && this.params.frames.length < 2 && element.params?.surface === GeomType.PLANE) {
            //   this.params.frames.push(element);
            // } else if (this.params.queryListActiveMap.longerons === 1 && this.params.longerons.length < 2) {
            //   this.params.longerons.push(element);
            // } else if (this.params.queryListActiveMap.reinforcedLongerons === 1 && this.params.reinforcedLongerons.length < 2) {
            //   this.params.reinforcedLongerons.push(element);
            // }
          })
        })
      });
    },
    computed: {

    },
    methods: {
      changePluginContainerHeight() {
        heatAndSoundInsulationCmd.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight})
      },
      url(imgName) {
        return getCommonPic(imgName, "heatSoundInsulation");
      },
      //控制折叠展开
      foldClick() {
        this.collapse = !this.collapse;
      },
      switchQuery(name) {
        for (const key in this.params.queryListActiveMap) {
          this.params.queryListActiveMap[key] = key === name ? 1 : 0;
        }
        if (name === "surfaces") {
          heatAndSoundInsulationCmd.setSelectType([ElementType.FACE, ElementType.SURFACE]);
        } else if (name === "jagCenterLines") {
          heatAndSoundInsulationCmd.setSelectType([ElementType.EDGE, ElementType.CURVE, ElementType.SECTIONLINE]);
        } else if (name === "installHolePointList" || name === "windowPoint") {
          heatAndSoundInsulationCmd.setSelectType([ElementType.POINT, ElementType.DATUMPOINT, ElementType.ORIGINPOINT])
        } else {
          heatAndSoundInsulationCmd.setSelectType([ElementType.FACE, ElementType.DATUMPLANE]);
        }
      },
      setCurTab(tab) {
        if (tab.index === "0"){
          // this.params.curTab = this.tabOptions[0];
          this.switchQuery("surfaces");
          // this.switchQuery("jagCenterLines");
        }
      },
      setHeading(frameNormal) {
        this.directionOptions = ["X轴","-X轴"];
        if (frameNormal.x > 0) {
          this.params.heading = 0;
          this.dirCourse = new THREE.Vector3(1,0,0);
        } else if (frameNormal.x < 0) {
          this.params.heading = 1;
          this.dirCourse = new THREE.Vector3(-1,0,0);
        } else if (frameNormal.y > 0) {
          this.directionOptions = ["Y轴","-Y轴"];
          this.params.heading = 0;
          this.dirCourse = new THREE.Vector3(0,1,0);
        } else if (frameNormal.y < 0) {
          this.directionOptions = ["Y轴","-Y轴"];
          this.params.heading = 1;
          this.dirCourse = new THREE.Vector3(0,-1,0);
        } else if (frameNormal.z > 0) {
          this.directionOptions = ["Z轴","-Z轴"];
          this.params.heading = 0;
          this.dirCourse = new THREE.Vector3(0,0,1);
        } else if (frameNormal.z < 0) {
          this.directionOptions = ["Z轴","-Z轴"];
          this.params.heading = 1;
          this.dirCourse = new THREE.Vector3(0,0,-1);
        }
      },
      changeSelect() {
        if (this.params.frames.length > 0) {
          let normal = this.params.frames[0].params.normal;
          let negateNormalVec = new THREE.Vector3(normal.x, normal.y, normal.z).negate();
          normal.x = negateNormalVec.x;
          normal.y = negateNormalVec.y;
          normal.z = negateNormalVec.z;
        }
      },
      handleCurrentChange(val) {
        if(!val){
          return;
        }
        this.params.holeSelectInfo = val;
        this.params.holeIndex = val.holeIndex;
        if(this.editType === 0){
          this.editHoleData();
        }
      },
      buttonDisabled() {
        if (this.params.holeIndex === -1) {
          return true;
        } else {
          return false;
        }
      },
      //新建
      addHoleData() {
        this.params.holeIndex = this.params.installHoleInfoList.length;
        this.params.holeType = 1;

        this.isHoleEdit = true;
        this.editType = 1;

        this.switchQuery("installHolePointList");
      },
      //编辑
      editHoleData() {
        if (!this.params.holeSelectInfo) {
          return;
        }
        this.setHoleInfo(this.params.holeSelectInfo);

        this.isHoleEdit = true;
        this.editType = 0;

        this.switchQuery("installHolePointList");
      },
      setHoleInfo(holeInfo){
        this.params.installHolePointList = [holeInfo.installHolePoint];
        this.params.holeIndex = holeInfo.holeIndex;
        this.params.holeName = holeInfo.holeName;
        this.params.holeType = holeInfo.holeType;
      },
      //删除
      deleteHoleData() {
        //必须保证有一个孔数据
        if(this.params.installHoleInfoList.length <= 0) {
          return;
        }
        let newGroups = [];
        for(let i = 0;i < this.params.installHoleInfoList.length;i++)
        {
          let curHoleInfo = this.params.installHoleInfoList[i];
          if(i !== this.params.holeIndex){
            if(i > this.params.holeIndex){
              curHoleInfo.holeIndex -= 1;
            }
            newGroups.push(curHoleInfo);
          }
        }

        this.params.installHoleInfoList = newGroups;
        this.editType = -1;
      },
      //保存孔参数
      saveHoleData(){
        if (this.params.installHolePointList.length <= 0) {
          heatAndSoundInsulationCmd.eventBusAlertMsg("请选择孔定位点！", "warning");
          return;
        }
        let tempHoleInfoList = [];
        for(let i = 0;i < this.params.installHolePointList.length;i++)
        {
          let curInstallHolePoint = this.params.installHolePointList[i];
          let holeInfo = {
            installHolePoint:curInstallHolePoint,
            holeIndex:this.params.holeIndex + i,
            holeName:curInstallHolePoint.name,
            holeType:this.params.holeType
          }
          tempHoleInfoList.push(holeInfo);
        }

        for(let n = 0;n < tempHoleInfoList.length;n++){
          let curHoleInfo = tempHoleInfoList[n];
          //判断是否与已有列表内容重复
          let checkRepeat = this.checkRepeat(this.params.installHoleInfoList,curHoleInfo,"installHolePoint",this.params.holeIndex);
          if(checkRepeat){
            heatAndSoundInsulationCmd.eventBusAlertMsg("安装定位孔重复！", "warning");
            return;
          }

          //如果是添加，将内容添加到列表，编辑直接替换
          if(this.editType === 1){
            this.params.installHoleInfoList.push(tempHoleInfoList[n]);
          }else{
            if(n === 0){
              this.params.installHoleInfoList[this.params.holeIndex] = curHoleInfo;
            }else{
              this.params.installHoleInfoList.push(tempHoleInfoList[n]);
            }
          }
        }

        this.params.installHolePointList = [];

        this.switchQuery("forkLineList");
        this.isHoleEdit = false;
        this.editType = -1;
      },
      cancelHoleData(){
        this.isHoleEdit = false;
        this.editType = -1;
      },
      //检查重复，list中的propName属性中的id,与ele中的propName属性中的id重复返回true，第noCheckNo个可不检查
      checkRepeat(list,ele,propName,noCheckNo){
        let bIsExisted = false;
        if(!ele || !ele[propName] || !ele[propName].id){
          return true;
        }
        for(let i = 0;i < list.length;i++){
          if(!list[i] || !list[i][propName] || !list[i][propName].id){
            return true;
          }

          if(i !== noCheckNo &&ele[propName].id === list[i][propName].id){
            bIsExisted = true;
            break;
          }
        }
        return bIsExisted;
      },

      confirm() {
        heatAndSoundInsulationCmd.executeConfirm(this.params);
      },
      cancel() {
        heatAndSoundInsulationCmd.closeActiveCmd();
      },
    },
    watch: {
      "params.flanging": function () {
        this.params.reinforced = !this.params.flanging;
      },
      "params.reinforced": function () {
        this.params.flanging = !this.params.reinforced;
        if (this.params.reinforced) {
          this.switchQuery("reinforcedLongerons");
        }
      }
    }
  }
</script>
<style scoped>
  .wrap {
    font-size: 12px;
  }
  .label-style {
    font-size: 12px;
    color: #606266;
    line-height: 30px;
  }
  .collapse-panel > .collapse-a {
    color: var(--text-color1);
    margin: 5px 0;
  }
  .collapse-a {
    display: flex;
    justify-content: space-between;
  }
  .url-style {
    width: 100%;
    height: 300px;
    display: block;
    margin-top: 10px;
    border: 1px darkgray solid;
  }
  .button-style {
      display: flex;
      justify-content: flex-end;
      margin-top: 5px;
  }
  .operation-border {
      border: 2px solid var(--bg-color3);
      padding: 8px;
  }
</style>